<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            需求：
            1.点击btn1
            打印div1 相对于页面左上角的位置
            打印div2 相对于页面左上角的位置
            打印div1 相对于父元素左上角的位置
            打印div2 相对于父元素左上角的位置
            2.点击btn2
            设置div2 相对于页面的左上角的位置
            */
            
            //点击btn1
            var $btn1=$("#btn1");
            $btn1.click(function(){
                var $div1=$(".div1");
                var $div2=$(".div2");
                //console.log($btn1);
                //打印div1 相对于页面左上角的位置
                console.log("left:"+$div1.offset().left+",top:"+$div1.offset().top);
                //打印div2 相对于页面左上角的位置
                console.log("left:"+$div2.offset().left+",top:"+$div2.offset().top);
                //打印div1 相对于父元素左上角的位置
                console.log("left:"+$div1.position().left+",top:"+$div1.position().top);
                //打印div2 相对于父元素左上角的位置
                console.log("left:"+$div2.position().left+",top:"+$div2.position().top);
            })

            //点击btn2
            var $btn2=$("#btn2");
            $btn2.click(function(){
                var $div2=$(".div2");
                $div2.offset({
                    left:0,
                    top:0
                })
            })
        })
    </script>
    <style type="text/css">
        *
        {
            margin: 0px;
        }

        .div1
        {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 20px;
            left: 10px;
            background-color: blue;
        }

        .div2
        {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            background-color: red;
        }

        .div3
        {
            position: absolute;
            top: 250px;
        }
    </style>
</head>
<body style="height: 2000px;">

    <div class="div1">
        <div class="div2">测试offset</div>
    </div>

    <div class="div3">
        <button id="btn1">读取offset和position</button>
        <button id="btn2">设置offset</button>
    </div>

    <!--
        获取/设置标签的位置数据
        offset():相对页面左上角的坐标
        position():相对于父元素左上角的坐标
    -->
</body>
</html>